<template>
  <div>
    <!-- 查询 -->
    <div id="input">
      <el-input v-model="input" placeholder="请输入卡号"></el-input>
      <el-row>
        <el-button type="success" round @click="findtop">查询</el-button>
        <el-button type="success" round @click="chongzhi">重置</el-button>
      </el-row>
    </div>

    <!-- 充值表单 -->
    <el-table :data="dangqianyeTOP" style="width: 100%">
      <el-table-column
        prop="personsNo"
        label="医疗卡号"
        width="250"
        class="text"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="daySup"
        label="充值金额"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="dayMoney"
        label="账户余额"
        width="250"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="opera" label="操作员号" width="250" align="center">
      </el-table-column>
      <el-table-column prop="day" label="充值日期" align="center">
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="pagination">
      <el-pagination
        @current-change="muDangqianye"
        layout="prev, pager, next"
        :page-size="2"
        :pageCount="maxPgeTOP"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      input: "",
    };
  },
  computed: {
    ...mapGetters(["dangqianyeTOP", "maxPgeTOP"]),
  },
  created() {
    this.getalltop();
  },
  methods: {
    ...mapActions(["getAllTopup", "findtopup"]),
    ...mapMutations(["muDangqianye"]),
    //查询所有充值
    getalltop() {
      this.getAllTopup({
        name: "GET_ALLTOP",
      });
    },
    //条件查询
    findtop() {
      this.findtopup({
        url:
          "/zsdx-outpatient-service/menzhen/medical-card/charge-one-page/select",
        method: "post",
        data: { medicalCarId: this.input },
      }).then((data) => {
        if (data == 200) {
          this.$message("查询成功");
        } else {
          this.$message("查询失败");
        }
      });
    },
    chongzhi() {
      this.getalltop();
      this.input = "";
    },
    //修改时间格式
    getData(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let d = date.getDate();
      return `${year}-${month}-${d}`;
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: 250px;
  margin-right: 20px;
}
#input {
  display: flex;
  // justify-content: center;
  margin-bottom: 20px;
}
.el-pagination {
  text-align: center;
}
.pagination {
  margin-top: 10px;
  float: right;
  width: 100%;
  background: white;
  display: flex;
  justify-content: center;
}
</style>